<template>
	<view class="container">

		<view class="u-flex u-row-start u-row-center">
			<view class="touxiang " v-for="(item,index) in 5" :key="index">
				<image class="picture" src="../../../static/img/othersname.png" mode=""></image>
			</view>
		</view>
		<view class="u-flex u-row-start u-row-center">
			<view class="touxiang " v-for="(item,index) in 5" :key="index">
				<image class="picture" src="../../../static/img/othersname.png" mode=""></image>
			</view>
		</view>
		<view class="u-flex u-row-center">
			<view class="detail u-p-20">
				查看更多成员
				<u-icon name="arrow-right" color="#FF9028" size="28" class="u-m-l-10"></u-icon>
			</view>
		</view>
		<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
		<view class="content">
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					会议室编号
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">001</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					会议室名称
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">无名称</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					会议室通知
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">无通知</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
			<u-gap :bg-color="bgColor" :height="height"></u-gap>
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					消息免打扰
				</view>
				<view class="u-flex u-row-start">
					<switch checked class="kaiqi" />
				</view>
			</view>

			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					会议时间
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">三天</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
			<u-gap :bg-color="bgColor" :height="height"></u-gap>
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					邀请
				</view>
				<view class="u-flex u-row-start">
					<switch checked class="kaiqi" />
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					移除
				</view>
				<view class="u-flex u-row-start">
					<switch checked class="kaiqi" />
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					上锁/解锁
				</view>
				<view class="u-flex u-row-start">
					<switch class="kaiqi" />
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					收藏
				</view>
				<view class="u-flex u-row-start">
					<switch class="kaiqi" />
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					邀请进公社
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">选择功能</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					管理员权限
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">对谁可见</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
			<u-gap :bg-color="bgColor" :height="height"></u-gap>
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					我的名称
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">华晨宇</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					专业
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">建筑设计</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					我的昵称
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">无昵称</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>





		</view>
		<u-button class="button">解散/退出</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 20,
				marginBottom: 20,
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	page{
		// padding-bottom: 100rpx;
	}
	.touxiang {
		image {
			width: 115rpx;
			height: 132rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.detail {
		color: #FF9028;
	}

	.content {
		// margin-bottom: 100rpx;
		
		.rigtfont {
			font-size: 30rpx;
			color: #9EA2B0;
		}

		.kaiqi {
			transform: scale(0.6) !important;
		}
	}
	.button {
		width: 662rpx;
		height: 80rpx;
		font-size: 32rpx;
		margin:224rpx auto 95rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;
	
		&.u-hairline-border:after {
			border: 0;
		}
	}
</style>
